<template>
  <div
    class="index-frame"
    v-if="!(head && phoneFirst && phoneSecond)"
    v-loading="!(head && phoneFirst && phoneSecond)"
    style="height: 100vh"
  ></div>
  <div class="index containe" v-else>
    <!-- 顶部图片 -->
    <TopPicture class="m-bt-15" />

    <!-- 最新最热 -->
    <div class="m-bt-15">
      <NewAndHotList :data="head" />
    </div>

    <el-row :gutter="20">
      <el-col v-for="(item, index) in phoneFirst" :key="index" :span="12">
        <div style="margin-bottom: 15px">
          <MobileGameListCard
            :data="item"
            :colorType="index % 2 === 0 ? 'orange' : 'blue'"
          />
        </div>
      </el-col>
    </el-row>

    <div class="m-b-15">
      <Advertisement :width="'100%'" />
    </div>

    <el-row :gutter="20">
      <el-col v-for="(item, index) in phoneSecond" :key="index" :span="12">
        <div style="margin-bottom: 15px">
          <MobileGameListCard
            :data="item"
            :colorType="index % 2 === 0 ? 'orange' : 'blue'"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import TopPicture from "@/components/TopPicture.vue";
import NewAndHotList from "@/components/NewAndHotList.vue";
import MobileGameListCard from "@/components/MobileGameListCard.vue";
import Advertisement from "@/components/Advertisement.vue";
import { onBeforeMount, ref } from "vue";

const head = ref(null);
const phoneFirst = ref(null);
const phoneSecond = ref(null);
onBeforeMount(() => {
  axios.get("/api/download/game/phoneHead").then((res) => {
    head.value = res.data.data;
  });
  axios.get("/api/download/game/phoneFirst").then((res) => {
    let data = res.data.data;
    phoneFirst.value = [
      { name: "休闲益智", data: data.xxGames, id: 471},
      { name: "网络游戏", data: data.wlGames, id: 423 },
      { name: "动作冒险", data: data.dzGames, id: 424 },
      { name: "策略塔防", data: data.clGames, id: 500 },
    ];
  });
  axios.get("/api/download/game/phoneSecond").then((res) => {
    let data = res.data.data;
    phoneSecond.value = [
      { name: "射击飞行", data: data.sjGames, id: 530 },
      { name: "角色扮演", data: data.jsGames, id: 520 },
      { name: "体育竞速", data: data.tyGames, id: 417 },
      { name: "模拟经营", data: data.mnGames, id: 455 },
    ];
  });
});
</script>

<style lang="less" scoped>
.containe {
  width: 1200px;
}
.index {
  min-height: 500px;

  .index-content {
    background: #fff;
  }

  .right-image {
    width: 100%;
    height: 305px;
    border-radius: 8px;
  }

  .main {
    display: flex;
    justify-content: space-between;

    &-left {
      width: 25%;
    }

    &-left-m {
      width: 70.5%;
    }

    &-center {
      width: 49%;
    }

    &-center-m {
      width: 100%;
    }

    &-right {
      width: 25%;
    }

    &-right-m {
      width: 28%;
    }
  }
}
</style>
